﻿<!DOCTYPE>

<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=EDGE;IE=11;IE=8,chrome=1" />
    <title>人员排产甘特图</title>
    <link href="/InSiteWebApplication/Content/Easyui/themes/metro/easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/custom-easyui.css" rel="stylesheet" />
    <link href="/InSiteWebApplication/Content/Easyui/themes/icon.css" rel="stylesheet" />
    <style type="text/css">
        .anychart-credits
        {
            display:none;
            }
    </style>
</head>
<body>
    <div class="panelSection">    
        <div class="easyui-panel " title="查询区域" style="padding:3px;width: 100%" 
        data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
            <div style="margin:3px 0 0 3px">
                <div style="float:left" >
                         <div class="divLabel" style="margin-bottom: 5px; ">
                                车间：</div>
                         <select id="ddlFactory" class="easyui-combobox"  data-options="width:120,height:20 "></select>
                </div>
                <div style="float:left;margin-left:10px;" >
                         <div class="divLabel" style="margin-bottom: 5px; ">
                                工区：</div>
                         <select id="ddlWorkcenter" class="easyui-combobox"  data-options="width:120,height:20 "></select>
                </div>
                <div style="float:left;margin-left:10px" >
                        <div class="divLabel" style=" margin-bottom: 5px; ">
                            班组：</div>
                        <select id="ddlTeam" class="easyui-combobox"  data-options="width:120,height:20, panelHeight:'auto' "></select>
                </div>
                <div style="float: left; margin-left: 10px">
                        <div class="divLabel" style="margin-bottom: 5px">
                            排产开始日期</div>
                        <input id="txtStartDate" type="text" class="easyui-datebox" style="height: 20px;
                            width: 148px" />
                    </div>
                    <div style="float: left; margin-left: 10px">
                        <div class="divLabel" style="margin-bottom: 5px">
                            排产结束日期</div>
                        <input id="txtEndDate" type="text" class="easyui-datebox" style="height: 20px;
                            width: 148px" />
                  </div>
                 <a href="#" id="btnSearch" class="easyui-linkbutton" data-options="width:80" style="margin-left:10px;margin-top: 15px;">
                            查询</a>
                <a href="#" id="btnReset" class="easyui-linkbutton" data-options="width:80" style="margin-left:10px;margin-top: 15px;">
                            重置</a>
                <div style="clear:both" ></div>
            </div>
        </div>
    </div>
    <div class="panelSection">    
        <div class="easyui-panel " title="人员甘特图" style="padding:3px;width: 100%" 
        data-options="closable:false,collapsible:true,minimizable:false,maximizable:false"> 
            <div id="container" >
                
            </div>
        </div>
    </div>
    <div id="dg" style="display:none" ></div> 
</body>
</html>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/ReferenceJsLib.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/jquery.easyui.min.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Content/Easyui/easyui-lang-zh_CN.js" type="text/javascript"></script>
<script src="/InSiteWebApplication/Scripts/CustomPageJs/CustomCommon.js" type="text/javascript"></script>
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/zh-cn.js"></script>  
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-base.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-ui.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-exports.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-gantt.min.js"></script>        
<script type="text/javascript" src="/InSiteWebApplication/Content/AnyGantt/anychart-data-adapter.min.js"></script>
<script type="text/javascript">
    var page = {
        rootPath: getRootPath(), //网站根路径
        ajaxUrl: getRootPath() + "/Ashx/ApsHandler/ApsResourceCapacityHandler.ashx",
        returnData:null,
        //初始化页面
        init: function () {
            page.bind();
           // page.loadResGrant();
        },
        //页面事件绑定
        bind: function () {
            $("#ddlFactory").combobox({
                panelHeight: 'auto',
                valueField: 'FACTORYID',
                textField: 'FACTORYNAME',
                url: page.rootPath + "/Ashx/CommonHandler.ashx" + "?action=getFactory",
                onSelect: function (record) {
                    page.loadWorkcenter(record.FACTORYID);
                }
            });

            $("#ddlWorkcenter").combobox({
                panelHeight: 'auto',
                valueField: 'WORKCENTERID',
                textField: 'WORKCENTERNAME',
                onSelect: function (record) {
                    page.loadTeam(record.WORKCENTERID);
                }
            });

            $("#ddlTeam").combobox({
                panelHeight: 'auto',
                valueField: 'TEAMID',
                textField: 'TEAMNAME'
            });
             //搜索
            $('#btnSearch').on("click", function () {  
                page.reset(false,true);
                page.loadResGrant();
            });
             //清除按钮
            $('#btnReset').on("click", function () {  
                page.reset(true,true);
            });
        },
        loadWorkcenter: function (factoryId) {
            if (isNullOrWhiteSpaceStr(factoryId)) {
                return;
            }
            $("#ddlWorkcenter").combobox('clear');
            $("#ddlWorkcenter").combobox('loadData', []);
            $("#ddlTeam").combobox('clear');
            $("#ddlTeam").combobox('loadData', []);
            $.ajax({
                type: "Get",
                url: page.rootPath + "/Ashx/CommonHandler.ashx" + "?action=getWorkcenterByFactory&factoryId=" + factoryId,
                cashe: false,
                async: false, //同步
                beforeSend: function () {

                },
                success: function (data) {
                    $("#ddlWorkcenter").combobox('loadData', JSON.parse(data))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        },
        loadTeam: function (workcenterId) {
            if (isNullOrWhiteSpaceStr(workcenterId)) {
                return;
            }
            $("#ddlTeam").combobox('clear');
            $("#ddlTeam").combobox('loadData',[]);
            $.ajax({
                type: "Get",
                url: page.rootPath + "/Ashx/CommonHandler.ashx" + "?action=getTeamByWorkcenter&workcenterId=" + workcenterId,
                cashe: false,
                async: false, //同步
                beforeSend: function () {

                },
                success: function (data) {
                    //console.log(data);
                    $("#ddlTeam").combobox('loadData', JSON.parse(data))
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.responseText);
                }
            });
        },
        //清除方法，重要！！！
        reset: function (iscondition, isresult) {
            clearMessage();
            if(iscondition){
                $("#ddlFactory").combobox('select', ''); 
            }
            if(isresult){                
                $("#container").empty();
            }
        },        
        timelineTooltip:function(_this){
            var period=_this.period;
            var numChildren = _this.item.numChildren();

            var startDate = anychart.format.dateTime(_this.start, "yyyy-MM-dd HH:mm:ss");
            var endDate = anychart.format.dateTime(_this.end, "yyyy-MM-dd HH:mm:ss");
            
            var parentText ="";

            var childText =""

            if(period!=null)//悬停在period上
            {
                var customData=period.customData;

                childText="<span style='font-weight:600;font-size:12pt'>" + 
                                period.text+ "<br>"+
                                '批次:'+customData.containername + "<br>"+
                                '工序:'+customData.workflowstepname + "<br>"+
                                '开始:'+customData.stepstarthms + "<br>"+
                                '结束:'+customData.stependhms+"</span>";

//                parentText ="<span style='font-weight:600;font-size:12pt'>" + 
//                                period.text+ "<br>"+
//                                '开始:'+customData.stepstarthms + "<br>"+
//                                '结束:'+customData.stependhms+"</span>"
                        
            }else{
                let periods= _this.item.get('periods');
                childText="<span style='font-weight:600;font-size:12pt'>"; 

                //parentText="<span style='font-weight:600;font-size:12pt'>"; 
                periods.forEach(function(_period){
                    var customData=_period.customData;
                    childText+=customData.stepstarthms+" 到 "+customData.stependhms+ "<br>";

                    //parentText+=customData.stepstarthms+" 到 "+customData.stependhms+ "<br>";
                })
                childText+="</span>";

                //parentText+="</span>";

            }
                     
            // identify the resource type and display the corresponding text
            if (numChildren > 0) {
            //console.log(this.item.getChildAt(0).get('periods'));
            return parentText;
            } else {
            //console.log(this.item.get('periods'));
            return childText;
            }
        },
        drawingFunction:function () {
  // get the shapes of the element
  var shapes = this["shapes"];
  // get the shape to be modified
  var path = shapes["path"];
  // get the bounds of the element
  var bounds = this["predictedBounds"];
    
//this["period"];//当前渲染的块
var item=this["item"];
if(item.numChildren()>0){
   // console.log(this.period); 
    //path.fill('green');   
}

  //console.log(this["predictedBounds"]);

  var h = bounds.height;
  var t = bounds.top;
  var l = bounds.left;
  var r = l + bounds.width;
  var h1 = t + h;   

let period=this['period'];
let customData=period.customData;

let stepstarthms=dayjs(dayjs().format('YYYY/MM/DD')+customData.stepstarthms);
let stependhms=dayjs(dayjs().format('YYYY/MM/DD')+customData.stependhms);

//if(item.get('id')!='0005d2800000003d'){    

h=h*customData.ratio;
t=t+h*customData.startPercent;
h1=t+h;

//}

  path.moveTo(l, t);
  path.lineTo(l , h1 );
  path.lineTo(r, h1);
  path.lineTo(r, t);

  //console.log(path.domElement());

  path.close(); 


}, 
        //设备甘特图加载方法
        loadResGrant: function () { //有限产能加载方法
            anychart.onDocumentReady(function () {
                var param="";
                param+="&factoryID="+$("#ddlFactory").combobox('getValue');
                param+="&workcenterID="+$("#ddlWorkcenter").combobox('getValue');
                param+="&teamID="+$("#ddlTeam").combobox('getValue');
                param+="&startDate="+$("#txtStartDate").datebox('getValue');
                param+="&endDate="+$("#txtEndDate").datebox('getValue'); 
                anychart.data.loadJsonFile(page.ajaxUrl + "?action=getEmployeeApsForGrant"+param, function (result) {
                    anychart.format.outputLocale('zh-cn');
                    anychart.format.inputDateTimeFormat("yyyy/MM/dd HH:mm:ss");

                    if(result.Result==false){
                        displayMessage(result.Message, false);
                        return;
                    }

                    var data=JSON.parse(result.ReturnData);
                    page.returnData=data;

                    //console.log(page.returnData);
                     

                    // create data tree on raw data
                    var treeData = anychart.data.tree(data, 'as-table');

                    chart = anychart.ganttResource();

                    chart.defaultRowHeight(80);

                    chart.splitterPosition(200); //左边grid宽度

                    // set data for the chart
                    chart.data(treeData);

                    //设置列
                    var dataGrid = chart.dataGrid();

                    dataGrid.column(0)
                            .title('')
                            .width(30)
                            .cellTextSettings({ hAlign: 'center' });

                    dataGrid.column(1)
                            .title("姓名")
                            .cellTextSettings({ hAlign: 'left', fontSize:12});

                    //datagrid tooltips
                    dataGrid.tooltip().useHtml(true); 

                    var periods = chart.getTimeline().periods();

                    periods.height(75);

                    // draw custom periods
                    periods.rendering().drawer(page.drawingFunction);

                    //图形块的label
                    var periodLabels =periods.labels();
                    periodLabels.enabled(true);
                    periodLabels.useHtml(true);
                    periodLabels.fontColor("#104d89");
                    periodLabels.fontWeight(600);
                    periodLabels.format(function() {
                        let customData=this.period.customData;
                        if(customData!=null){
                            if(customData.isHolidate!=null&&customData.isHolidate=='1'){
                                var text='<span style="color:#fff;font-wieght:bold">'+this.period.text+'</span>';
                                return text;     
                            }
                        }
                    });

                    // configure tooltips of the timeline
                chart.getTimeline().tooltip().useHtml(true);
                chart.getTimeline().tooltip().format(function() {
                    return  page.timelineTooltip(this);
                });

                    chart.contextMenu(false);//禁用右键

                    // set container id for the chart
                    chart.container('container');

                    // initiate chart drawing
                    chart.draw();
                                       
                    // zoom chart all dates range
                    chart.fitAll();

                    // Enable chart redrawing.
                    chart.autoRedraw(true);

                    chart.zoomTo("day", 31, "first-date");

                    chart.listen("rowDblClick", function (e) {
                        if(e.period!=null){
                            var parent=e.item.getParent();
                            var item=e.item;
                            var popupParam={resourceId:e.period.customData.resourceid,containDate:e.period.start};//item.get('id')

                            var url="ApsLMResourceDetailPage.html?v=" + new Date().getTime();
                            url += "&parentDiv=dg";
                            $('#dg').dialog({
                                title: '批次工序排产计划详细查看',
                                fit: true,
                                top: 10,
                                closed: false,
                                cache: false,
                                modal: true,
                                content: '<iframe src="' + url + '" width="100%" height="99%" frameborder="0" scrolling="auto"></iframe>',
                                returnData:null,
                                popupData: popupParam, //弹出页面的传参
                                onClose: function () {
                                    var returnData = $("#dg").dialog('options').returnData; //返回数据
                                    if (returnData != null&&returnData.isParentRefresh) {
                                        //console.log('更新父级数据');
                                        $("#container").empty();
                                        page.loadResGrant();
                                        //displayMessage("调整成功", true);
                                    }


                                }
                            });
                        }
                    });

                    });

                });

        }
    }

    $(function () {
        page.init(); 
    })
</script>

